<template>
  <div class="EleButton">
    <button
      @click="$emit('changeBtntext', '<')"
      :disabled="rightListLength<=0"
    >
      ←</button
    ><button
      @click="$emit('changeBtntext','>')"
      :disabled="leftListLength<=0"
    >
      →
    </button>
  </div>
</template>

<script>
export default {
  props: [ "leftListLength", "rightListLength"],
  data() {
    return {};
  },
  methods: {
    cl(value) {
      console.log(value);
    },
  },

  computed: {},
};
</script>

<style scoped >
.EleButton{
  width: 240px;
    display: flex;
  justify-content: space-evenly;
}
.Ele {
  width: 120px;
  min-height: 240px;
  background-color: #f0f8ff;
  margin: 10px;
  font-size: 16px;
}

button {
  width: 75px;
  height: 75px;
  color:#4c4c9a;
  background-color: #a4b7cf;
  border: none;
  transition: all 0.5s;
  border-radius: 15px;
  font-size: 35px;
  font-weight: 700;
}

button[disabled] {
  background-color: #bdc5c1;
  font-weight: 400;
  font-size: 20px;
  color: #bdcffa;
  cursor: not-allowed;
}
</style>